<template>
  <div class="table-container">
    <el-table
      :data="tableDataLIst"
      border
      stripe
      size="mini"
      height="391"
      style="width: 100%">
      <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
      <el-table-column prop="student" label="学生"></el-table-column>
      <el-table-column prop="kecheng1" label="精力状态"></el-table-column>
      <el-table-column prop="kecheng2" label="学习状态"></el-table-column>
      <el-table-column prop="kecheng3" label="情绪状态"></el-table-column>
      <el-table-column prop="kecheng4" label="成绩"></el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 40, 60, 80]"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total(tableDataLIst.length)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GradeTableData",
    components: {},
    data() {
      let item = {
        student: '王小璐',
        kecheng1: '86',
        kecheng2: '96',
        kecheng3: '77',
        kecheng4: '90'
      };
      return {
        tableDataLIst: Array(30).fill(item),
        currentPage: 1,
        pageSize: 20
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      indexMethod(index) {
        return index + 1;
      },

      handleSizeChange(val) {
        this.pageSize = val;
      },

      handleCurrentChange(val) {
        this.currentPage = val;
      },

      total(num) {
        return num;
      }
    }
  }
</script>

<style scoped>
  .page{
    text-align: center;
    margin-top: 20px;
  }
</style>
